<template>
	<div id="di">
		<!-- <Pie :color="color" :series="series" :centerName="centerName"></Pie> -->
		<!-- <Linehr :lineData="lineData" :legend="legend"></Linehr> -->
		<Mape :chinaCities="chinaCities"></Mape>
		<el-button>123</el-button>
	</div>
</template>

<script>
	import Pie from '/src/components/pie.vue'
	import Linehr from '/src/components/linehr.vue'
	import Mape from '/src/components/mape.vue'
	import chinaCities from '/src/assets/js/china.js'
	export default {
		components:{
			Pie,
			Linehr,
			Mape
		},
		data() {
			return {
				monthList:[],
				// ===================================================================Pie
				/* msg: 'Welcome to Your Vue.js App',
				centerName:[
					{name:['组织结构风险']},
					{name:['违反法律法规']},
					{name:['维权风险']},
					{name:['经验不善']},
					{name:['违法经营']},
					{name:['涉嫌犯罪']},
					{name:['投资风险']},
					{name:['战略管理风险','产品逾期风险']},
					{name:['人员变动']},
					{name:['严重失信']}],
				color:['#e33d5f','#fc7f1f','#fda524'],
				series : [
					{
						name: 'Reference Page',
						type: 'pie',
						radius: ['34%', '40%'],
						data:[
							{
								value:49.12, 
								name:'III级风险49.12%',
								label:{
									color:'#e33d5f'
								}
							},
							{
								value:49.12, 
								name:'IV级风险49.12%',
								label:{
									color:'#fc7f1f'
								}
							},
							{
								value:1.76, 
								name:'V级风险1.76%',
								label:{
									color:'#fda524'
								}
							},
						],
						labelLine: {
							show: true,
						}
					}
				], */
				// ===================================================================Linehr
				/* legend:['yy','mm'],
				lineData:[
					{
						name:'yy',
						data:[120, 132, 101, 124, 130, 135, 120],
						colorStops:['rgb(202,146,61)','rgb(80,118,210)'],
						lineStyle:'rgb(202,146,61)'
					},
					{
						name:'mm',
						data:[110, 132, 121, 134, 140, 115, 128],
						colorStops:['rgb(80,118,210)','rgb(202,146,61)'],
						lineStyle:'rgb(80,118,210)'
					}
				] */
				chinaCities:chinaCities.chinaCities
			};
		},
		mounted() {
			window.addEventListener('scroll', this.fun, true);  // 监听（绑定）滚轮滚动事件
			this.getMonth()
		},
		methods: {
			fun(){
				/* let url = 'https://api.pingping6.com/tools/acg2/'
				this.$api.post(url).then(res => {
					console.log(res);
				}) */
				let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;  
				// 设备/屏幕高度
				let scrollObj = document.getElementById("di"); // 滚动区域
				let scrollTop = scrollObj.scrollTop; // div 到头部的距离
				let scrollHeight = scrollObj.scrollHeight; // 滚动条的总高度
				//滚动条到底部的条件
				if(scrollTop+clientHeight == scrollHeight){
				    // div 到头部的距离 + 屏幕高度 = 可滚动的总高度
				}
			},
			getMonth(){
	            // var dataArr = [];
	            var data = new Date();
	            var year = data.getFullYear();
	            data.setMonth(data.getMonth()-1,1)//获取到当前月份,设置月份
	            for (var i = 0; i < 12; i++) {
	                data.setMonth(data.getMonth() + 1);//每次循环一次 月份值加1
	                var m = data.getMonth() + 1;
	                m = m < 10 ? m : m;
	                this.monthList.push({
	                    year: data.getFullYear() + "年",
	                    month: (m) + "月"
	                })
	            }
	            console.log(this.monthList)
				// 存入所有的年份
				let yearArr = []
				for (var i = 0; i < this.monthList.length; i++) {
					yearArr.push(this.monthList[i].year)
				}
				// 年份去重
				yearArr = Array.from(new Set(yearArr))
				console.log(yearArr);
				// 不同年的月份分开
				// 先存入去重后的年份
				let yearSort = []
				for (var i = 0; i < yearArr.length; i++) {
					yearSort.push({month:[],year:yearArr[i]})
				}
				// 判断yearSort的年份跟monthList的年份相同的则把月份存入yearSort的month值里
				for (var i = 0; i < yearSort.length; i++) {
					for (var j = 0; j < this.monthList.length; j++) {
						if(yearSort[i].year == this.monthList[j].year){
							yearSort[i].month.push(this.monthList[j].month)
						}
					}
				}
				console.log('yearSort',yearSort);
	        }
		}
	};
</script>

<style scoped>
	#myChart{
		
	}
</style>
